 {include file="public/head" /}
 <meta charset="utf-8">
 <style>
 .col-body{width:100%;margin:auto;height:130px;overflow:hidden;border-radius:5px;border:1px solid #ccc;}
 .col-title{width:100%;height:50px;line-height:50px;box-sizing:border-box;padding-left:10px;background:#409EFF;color:#fff;}
 .col-user{background:#67C23A}
 .col-day{background:#E6A23C}
 .col-order{background:#F56C6C}
 .col-bail{background:#909399}
 .col-content{height:80px;line-height:80px;font-size:30px;box-sizing:border-box;padding-left:10px;}
 #main,#main1{height:300px;}
 </style>
<body>
	<div id="box">
		<div class="info-title">基本信息</div>
		<div class="row">
			<div class="col">
				<div class="col-body">
					<div class="col-title">用户可用余额</div>
					<div class="col-content">{{account}}</div>
				</div>
			</div>
			<div class="col">
				<div class="col-body">
					<div class="col-title col-user">用户量</div>
					<div class="col-content">{{user_num}}</div>
				</div>
			</div>
			<div class="col">
				<div class="col-body">
					<div class="col-title col-day">今日注册</div>
					<div class="col-content">{{day_reg}}</div>
				</div>
			</div>
			<div class="col">
				<div class="col-body">
					<div class="col-title col-order">今日订单</div>
					<div class="col-content">{{day_order}}</div>
				</div>
			</div>
			<div class="col">
				<div class="col-body">
					<div class="col-title col-bail">我的保证金</div>
					<div class="col-content">{{bail}}</div>
				</div>
			</div>
		</div>
		<div class="info-title">饼图信息</div>
		<div>
			<div class="row">
				<div class="col-sm-6">
					<div id="main"></div>
				</div>
				<div class="col-sm-6">
					<div id="main1"></div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="/agent/js/echarts.js"></script>
<script>
new Vue({
	el:"#box",
	data:{
		account : "{$account}",
		bail : "{$bail}",
		user_num : "{$user_num}",
		day_order : "{$day_order}",
		recharge : "{$recharge}",
		cash : "{$cash}",
		fee : "{$fee}",
		loss_up : "{$loss_up}",
		loss_down : "{$loss_down}",
		day_reg: "{$day_reg}"
	},
	mounted:function(){
		this.cashBie();
		this.cashBie1();
		console.log(this.loss_up);
	},
	methods:{
		//充值提现图
		cashBie:function(){
			option = {
			    tooltip: {
			        trigger: 'item',
			        formatter: "{a} <br/>{b}: {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        x: 'left',
			        data:['充币流水','提币流水']
			    },
			    series: [
			        {
			            name:'访问来源',
			            type:'pie',
			            radius: ['50%', '70%'],
			            avoidLabelOverlap: false,
			            label: {
			                normal: {
			                    show: false,
			                    position: 'center'
			                },
			                emphasis: {
			                    show: true,
			                    textStyle: {
			                        fontSize: '30',
			                        fontWeight: 'bold'
			                    }
			                }
			            },
			            labelLine: {
			                normal: {
			                    show: false
			                }
			            },
			            data:[
			                {value:this.recharge, name:'充币流水'},
			                {value:this.cash, name:'提币流水'},
			            ]
			        }
			    ]
			};
			var myChart = echarts.init(document.getElementById('main'));
			console.log(option);
			myChart.setOption(option);
		},
		//充值提现图
		cashBie1:function(){
			option = {
			    tooltip: {
			        trigger: 'item',
			        formatter: "{a} <br/>{b}: {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        x: 'left',
			        data:['手续费','盈利','亏损']
			    },
			    series: [
			        {
			            name:'访问来源',
			            type:'pie',
			            radius: ['50%', '70%'],
			            avoidLabelOverlap: false,
			            label: {
			                normal: {
			                    show: false,
			                    position: 'center'
			                },
			                emphasis: {
			                    show: true,
			                    textStyle: {
			                        fontSize: '30',
			                        fontWeight: 'bold'
			                    }
			                }
			            },
			            labelLine: {
			                normal: {
			                    show: false
			                }
			            },
			            data:[
			                {value:this.fee, name:'手续费'},
			                {value:this.loss_up, name:'盈利'},
			                {value:this.loss_down, name:'亏损'}
			            ]
			        }
			    ]
			};
			var myChart = echarts.init(document.getElementById('main1'));
			console.log(option);
			myChart.setOption(option);
		},
	}
});
</script>
</html>